class TransformTool {
  lists: [];
  pageData: any;
  renderContent: string;

  constructor(params: any) {
    const { lists, pageData } = params;

    this.lists = lists;
    this.pageData = pageData;
    this.renderContent = '';
  }

  setLists(lists: any) {
    this.lists = lists;
  }

  getLists() {
    return this.lists;
  }

  getRenderContent() {
    return this.renderContent;
  }

  transform() {
    console.log(this.lists);
    const { bgImg, height, scale, width } = this.pageData;
    let container = `<div class='container' style="position: relative;width: ${width}px;height: ${height}px;background-image: url(${bgImg});background-repeat:no-repeat;">`;

    this.lists.forEach((list) => {
      const { item, point } = list;

      container += this.createEleAccordingType(list);
    });

    container += '</div>';

    this.renderContent = container;
  }

  createEleAccordingType(list: any) {
    const { item, point } = list;
    const { w = 0, h = 0, x = 0, y = 0 } = point;
    const { config, component } = item;

    if (component !== 'ResourceIcon') return '';

    switch (config?.category) {
      case 'audio': {
        return `<div class='absolute bd1' style='left: ${x}}}px;top:${y}px; width: ${w}px; height: ${h}px;'><a href="audio://${config.path}" title="${config.name}" class="icon icon-audio"></a></div>`;
      }
      case 'video': {
        return `<div class='absolute bd1' style='left: ${x}px;top:${y}px; width: ${w}px; height: ${h}px;'><a href="video://${config.path}" title="${config.name}" class="icon icon-video"></a></div>`;
      }
      case 'rich_text': {
        return `<div class='absolute bd1' style='left: ${x}px;top:${y}px; width: ${w}px; height: ${h}px;'><a href="normal://" title="${
          config.name
        }" class="icon icon-normal" data-object='[{"content": ${encodeURIComponent(
          config.content,
        )}}]'></a></div>`;
      }
      case 'animation': {
        return `<div class='absolute bd1' style='left: ${x}px;top:${y}px; width: ${w}px; height: ${h}px;'><a href="html://${config.path}" title="${config.name}" class="icon icon-video"></a></div>`;
      }
      case 'question': {
        return `<div class='absolute bd1' style='left: ${x}px;top:${y}px; width: ${w}px; height: ${h}px;'><a title="习题弹窗" href="normal://" title="${config.name}" class="icon icon-practise" data-object='[{"content": ${config.question_data}}]'></a></div>`;
      }

      default: {
        return '';
      }
    }
  }
}

export default TransformTool;
